<template>
    <view class="banner-wrap-2">
        <swiper indicator-dots indicator-active-color="#333" next-margin="24px" circular :style="{ height: banner_height + 'rpx' }">
            <block v-for="(item, index) in list">
                <swiper-item>
                    <u-image :src="item.image" width="calc(100% - 4px)" :height="banner_height" @click="router(item.url)"></u-image>
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config/index'
import { computed, inject, ref } from 'vue'

const ins = inject<any>('data')

const screenWidth = computed((): number => {
    return uni.getSystemInfoSync().screenWidth
})

let banner_height = ref(uni.$u.$tools.px2rpx((screenWidth.value * 770) / 800))
let list = ref<any>([])
list.value = ins.images.map((m: any) => {
    return {
        image: `${global.productImageUrl}${m.image}/0`,
        url: m.url
    }
})

function router(params: any) {
    if (typeof params == 'number') {
        let id = list.value[params].url.urlId,
            type = list.value[params].url.urlType,
            url = list.value[params].url.urlString
        uni.$u.$util.jumpByUrlType(id, type, url)
    }
    if (typeof params == 'object') {
        let id = params.urlId,
            type = params.urlType,
            url = params.urlString
        uni.$u.$util.jumpByUrlType(id, type, url)
    }
}
</script>

<style lang="scss" scoped>
.banner-wrap-2 {
    margin-top: 20rpx;
    background-color: white;
}
</style>
